//
//  HolderView.swift
//  SBLoader
//
//  Created by Satraj Bambra on 2015-03-17.
//  Copyright (c) 2015 Satraj Bambra. All rights reserved.
//

import UIKit

protocol HolderViewDelegate:class {
  func animateLabel()
}

class HolderView: UIView {
  /// 这个动画从一个椭圆开始，椭圆是从屏幕中间扩展到视图，然后在周围有点摇摆。
  let ovalLayer = OvalLayer()
//    是时候来电有趣的东西了。你将要把一个椭圆变身成为一个三角形。在用户眼里，这个转变应该看上去无缝连接的。要做到这些，你会用到两个相同颜色的分离的形状。
  let triangleLayer = TriangleLayer()
//    矩型框动画
  let redRectangleLayer = RectangleLayer()
  let blueRectangleLayer = RectangleLayer()
    
//    动画的下一步就是填充容器。你要寻找到的效果就像是水填充到玻璃杯中。这是个非常棒的视觉特效,使之为一个大的飞溅特效
  let arcLayer = ArcLayer()

  var parentFrame :CGRect = CGRectZero
  weak var delegate:HolderViewDelegate?
  
  override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = Colors.clear
  }
  
  required init(coder: NSCoder) {
    super.init(coder: coder)
  }
    /**
    这段代码首先添加了你上面创建的 OverLayer 的实例作为一个子层到视图层，然后调用 expand() 方法，这是被切掉的需要你来填充的函数之一
    */
  func addOval() {
    layer.addSublayer(ovalLayer)
    ovalLayer.expand()
//    这句是持续调用抖动感觉的动画的
    NSTimer.scheduledTimerWithTimeInterval(0.3, target: self, selector: "wobbleOval",
      userInfo: nil, repeats: false)
  }
    /**
    使用视图中扩张的椭圆，下一步就是在椭圆的步调中设置一些反弹，使之摇摆起来
    1.这行(代码)添加了一个 TiangleLayer 实例，这个实例在稍早的时候作为HolderView层的子层已经被初始化过了。
    2.正如你所知道的，因为这个摇摆动画在1.8s的总间隔时间内运行两次，所以在中间点启动变形过程会是一个非常好的地方。因此，你要添加一个定时器timer,它在延迟0.9s之后执行drawAnimatedTriangle()
    注意：找到动画的正确的间隔或延迟需要反复实验，这也是一个好的动画和一个极好的动画区别。我鼓励你去修补你的动画，让它们看上去完美。这可能要花点时间，但确是值得的
    */
  func wobbleOval() {
    ovalLayer.wobble()
    // 1
    layer.addSublayer(triangleLayer) // Add this line
    ovalLayer.wobble()

    // 2
    // Add the code below
    NSTimer.scheduledTimerWithTimeInterval(0.9, target: self,
      selector: "drawAnimatedTriangle", userInfo: nil,
      repeats: false)
  }
    /**
    这个方法会被你刚刚加入到 wobbleOval() 中的timer定时器调用。
    */
  func drawAnimatedTriangle() {
    triangleLayer.animate()
    //为了完成变形过程，你需要在缩小OvalLayer椭圆层的同时，对 HolderView 旋转360度，让 TriangleLayer 三角层单独隔离出来。
    //这里设置了一个定时器timer，用于在三角形动画结束后触发。0.9s的时间还次用反复实验来确定
    NSTimer.scheduledTimerWithTimeInterval(0.9, target: self, selector: "spinAndTransform",
      userInfo: nil, repeats: false)
  }
    /**
    你之前创建的定时器添加了这段代码，定时器会在椭圆停止摆动并且三角行的角出现的时候调用这个函数。在这里我们看下这个函数更详细的（介绍）
    
    更新层的锚点到略微靠近视图中间的下方。这提供了一个看上去更加自然的旋转。这是由于椭圆和三角形事实上比视图中心在垂直方向上略微偏移。因此，如果视图围绕中心旋转，椭圆和三角形可能会垂直方向移动
    应用一个CABasicAnimation类来对层做360度旋转，或者2*pi的弧度。旋转是围绕着Z轴，Z轴就是穿过屏幕，垂直于屏幕平面的轴
    在OvalLayer中调用contract()来展示动画，这个动画会削减椭圆的尺寸直到消失
    */
  func spinAndTransform() {
    // 1
    layer.anchorPoint = CGPointMake(0.5, 0.6)

    // 2
    var rotationAnimation: CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
    rotationAnimation.toValue = CGFloat(M_PI * 2.0)
    rotationAnimation.duration = 0.45
    rotationAnimation.removedOnCompletion = true
    layer.addAnimation(rotationAnimation, forKey: nil)

    // 3
    ovalLayer.contract()
//    这里创建两个定时器timer分别调用 drawRedAnimatedRectangle() 和 drawBlueAnimatedRectangle() 。旋转动画结束后，首先需要画出矩形，当红色矩形描边绘画接近完成的时候，蓝色矩形描边开始。
    NSTimer.scheduledTimerWithTimeInterval(0.45, target: self,
      selector: "drawRedAnimatedRectangle",
      userInfo: nil, repeats: false)
    NSTimer.scheduledTimerWithTimeInterval(0.65, target: self,
      selector: "drawBlueAnimatedRectangle",
      userInfo: nil, repeats: false)
  }

  func drawRedAnimatedRectangle() {
    layer.addSublayer(redRectangleLayer)
    redRectangleLayer.animateStrokeWithColor(Colors.red)
  }

  func drawBlueAnimatedRectangle() {
    layer.addSublayer(blueRectangleLayer)
    blueRectangleLayer.animateStrokeWithColor(Colors.blue)
//    这（段代码）创建了一个定时器，用于当蓝色 RectangleLayer 完成绘画后调用 drawArc()
    NSTimer.scheduledTimerWithTimeInterval(0.40, target: self, selector: "drawArc",
      userInfo: nil, repeats: false)
  }
    /**
    这段代码是在你动画填充之前，添加了上面已经创建ArcLayer 的实例对象到HolderView 层。
    */
  func drawArc() {
    layer.addSublayer(arcLayer)
    arcLayer.animate()
//    这（段代码）创建了一个定时器，用于在 ArcLayer 填充到容器后调用 expandView()
    NSTimer.scheduledTimerWithTimeInterval(0.90, target: self, selector: "expandView",
      userInfo: nil, repeats: false)
  }
    /**
    1.HolderView视图的背景设置为蓝色，和你填充到矩形的颜色匹配
    2.帧扩展到你稍早时候添加的RectangleLayer矩形层的描边宽度，
    3.所有的子层都移除。现在没有了椭圆，没有了三角形，没有了矩形图层
    4.添加动画，并扩张HolderView填充屏幕，当动画结束的时候，调用addLabel().
    */
  func expandView() {
    backgroundColor = Colors.blue
    frame = CGRectMake(frame.origin.x - blueRectangleLayer.lineWidth,
      frame.origin.y - blueRectangleLayer.lineWidth,
      frame.size.width + blueRectangleLayer.lineWidth * 2,
      frame.size.height + blueRectangleLayer.lineWidth * 2)
    layer.sublayers = nil

    UIView.animateWithDuration(0.3, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
      self.frame = self.parentFrame
      }, completion: { finished in
        
        self.addLabel()
    })
  }
    /**
    这里只是简单的调用视图的代理函数，展示label标签
    */
  func addLabel() {
    delegate?.animateLabel()
  }

}
